<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:78:"/www/wwwroot/tp.luyir.cn/public/../application/index/view/index/chat_room.html";i:1588991432;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天</title>
    <link rel="stylesheet" type="text/css" href="/newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="/newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="/newcj/fonts/iconfont.css?v=2016070717">
</head>
<body>

<div class='fui-page-group'>
    <div class='fui-page chatDetail-page'>
        <div class="chat-header flex">
            <i class="icon icon-toleft t-48"></i>
            <span class="shop-titlte t-30">与<?php echo $toname; ?>聊天……</span>
            <span class="shop-online t-26"></span>
            <span class="into-shop">进店</span>
        </div>
        <div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
            <div class="chat-content">
                <p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>
                <p class="chat-time"><span class="time"><?php echo date('Y-m-d',time());?></span></p>
            </div>
        </div>
        <div class="fix-send flex footer-bar">
            <i class="icon icon-emoji1 t-50"></i>
            <input class="send-input t-28" maxlength="200">
            <i class="icon icon-add t-50" style="color: #888;"></i>
            <span class="send-btn">发送</span>
        </div>
    </div>
</div>
<script src="/newcj/js/jquery.min.js"></script>
<script src="/newcj/js/dist/flexible/flexible_css.debug.js"></script>
<script src="/newcj/js/dist/flexible/flexible.debug.js"></script>
<script>


    $(function () {
        let fromid = "<?php echo $fromid; ?>";
        let toid = "<?php echo $toid; ?>";//当前的聊天对象

        let from_avatar = '';
        let to_avatar = '';

        let title_name = '';

        var ws = new WebSocket("wss://tp.luyir.cn/wss");

        ws.onmessage = function (e) {
            let result = JSON.parse(e.data);
            let type = result.type
            console.log('result:', result);
            switch (type) {
                case 'init':
                    let bind = JSON.stringify({'type': 'bind', 'fromid': fromid});
                    ws.send(bind);
                    getMemberAvatar({fromid, toid});
                    /*getMemberName({toid});*/
                    //加载聊天记录
                    messageLoad({fromid, toid});
                    return;
                case 'say':
                    //say与save 是在一起操作的;
                    //say是将接收到的数据展示在接受者的左边;
                    //save是通知发送者做数据持久化操作
                    let html = '<div class="chat-text section-left flex"><span class="char-img" style="background-image: url(' + to_avatar + ')"></span>';
                    html += '<span class="text"><i class="icon icon-sanjiao4 t-32"></i>' + result.data + '</span></div>';
                    //发送消息的人和接受消息的是同一个人则显示,其他的则不显示
                    if (toid == result.fromid) {
                        $('.chat-content').append(html);
                    }
                    return;
                case 'save':
                    //发送者接收到通知做数据持久化(将聊天数据入库)
                    //为什么是发送者做数据持久化,发送者一定是在线的,接受者可能不在线
                    console.log('result:', result);
                    saveMessage(result);
                    return;
            }

        }

        $('.send-btn').click(function () {
            let msg = $('.send-input').val();
            let html = '<div class="chat-text section-right flex">';
            html += '<span class="text"><i class="icon icon-sanjiao3 t-32"></i>' + msg + '</span>';
            html += '<span class="char-img" style="background-image: url(' + from_avatar + ')"></span></div>';
            //组织发给bussion进程的数据
            let data = {
                'type':   'say',//businessWorker进程判断要处理的什么
                'fromid': fromid,//谁发出的
                'toid':   toid,//发给谁
                'data':   msg
            };
            //给worker进程发送消息
            ws.send(JSON.stringify(data));
            //将发送的消息展示在右边
            $('.chat-content').append(html);
            $('.send-input').val('');
        })

        function saveMessage (message) {
            let url = "/admin/chat/index/save_message";
            $.post(url, message, function (res) {
                console.log('res:', res);
            }, 'json');

        }

        function getMemberAvatar (data) {
            let url = "/admin/chat/index/getMemberAvatar";
            $.post(url, data, function (res) {
                from_avatar = res.data.from_avatar;
                to_avatar = res.data.to_avatar;
            }, 'json');
        }

        function getMemberName (data) {
            let url = "/admin/chat/index/getMemberName";
            $.post(url, data, function (res) {
                title_name = res.data.nickname;
                $('.shop-titlte').text(title_name);
            }, 'json');
        }

        function messageLoad (data) {

            let url = "/admin/chat/index/getMessageList";
            $.post(url, data, function (res) {
                if (res.code == 1) {
                    let result = res.data;
                    for (let i = 0; i < result.length; i++) {
                        if (result[i]['fromid'] == toid ) {
                            let left_html = '<div class="chat-text section-left flex"><span class="char-img" style="background-image: url(' + to_avatar + ')"></span><span class="text"><i class="icon icon-sanjiao4 t-32"></i>' + result[i]['content']+ '</span></div>';
                            $('.chat-content').append(left_html);

                        }else{
                           let  right_html = '<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i>' + result[i]['content'] + '</span><span class="char-img" style="background-image: url(' + from_avatar + ')"></span></div>';
                            $('.chat-content').append(right_html);

                        }
                    }
                }

                $('.chat-content').scrollTop(3000);
            }, 'json');
        }


    })


</script>


</body>


</html>
